<template>
<!-- 转让/移转申请/注册商标申请书 -->
<div class="total">
    <div class="head">
        <h1>转让/移转申请/注册商标申请书</h1>
        <el-form :label-position="right" label-width="190px" size="mini">
            <div class="information">
                <el-form-item label="转让人名称(中文) :">
                    <span>{{record.appName}}</span>
                </el-form-item>
                <el-form-item label="(英文) :">
                    <span>{{record.appNameEn}}</span>
                </el-form-item>
                <el-form-item label="转让人地址(中文) :">
                    <span>{{record.busAddress}}</span>
                </el-form-item>
                <el-form-item label="(英文) :">
                    <span>{{record.appAddEn}}</span>
                </el-form-item>
                <el-form-item label="受让人名称(中文) :">
                    <span>{{record.aassNameCn}}</span>
                </el-form-item>
                <el-form-item label="(英文) :">
                    <span>{{record.aassNameEn}}</span>
                </el-form-item>
                <el-form-item label="受让人地址(中文) :">
                    <span>{{record.aassAddCn}}</span>
                </el-form-item>
                <el-form-item label="(英文) :">
                    <span>{{record.aassAddEn}}</span>
                </el-form-item>
                <el-form-item label="邮政编码 :">
                    <span>{{record.postCode}}</span>
                </el-form-item>
                <el-form-item label="联系人 :">
                    <span>{{record.contacts}}</span>
                </el-form-item>
                  <el-form-item label="邮箱 :">
                    <span>{{record.email}}</span>
                </el-form-item>
                <el-form-item label="电话 :">
                    <span>{{record.phone}}</span>
                </el-form-item>
            </div>
            <div class="domestic">
                <el-form-item v-if="record.receCn" label="外国受让人的国内接收人 :">
                    <span>{{record.receCn}}</span>
                </el-form-item>
                <el-form-item v-if="record.receAddCn" label="国内接收人地址 :">
                    <span>{{record.receAddCn}}</span>
                </el-form-item>
                <el-form-item v-if="record.postCodeCn" label="邮政编码 :">
                    <span>{{record.postCodeCn}}</span>
                </el-form-item>
            </div>
            <!-- <el-form-item label="代理机构名称 :">
          <span>{{record.ageName}}</span>
        </el-form-item> -->
            <el-form-item label="商标申请号/注册号 :">
                <span>{{record.appNum}}</span>
            </el-form-item>
            <div class="choice">
                <el-form-item label="是否共有商标 :">
                    <span v-if="record.isComm==0?false:true">是</span>
                    <span v-if="record.isComm==0?true:false">否</span>
                </el-form-item>
            </div>
            <div class="bot"> 
              <el-form-item label="营业执照 :" >
                <imgshow> <img class="business-license" :src="this.mconfig.host+record.busimg" alt /></imgshow>
              </el-form-item>
            </div>
            <div class="bot"> 
              <el-form-item v-if="record.idcardimg" label="身份证(正反面) :">
                <imgshow> 
                  <img class="idcardimg" :src="this.mconfig.host+record.idcardimg" alt />
                </imgshow>
              </el-form-item>
            </div>
            <div class="bot"> 
            <el-form-item label="受让人营业执照 :">
              <imgshow> 
                <img class="business-license" :src="this.mconfig.host+record.businessLicense" alt />
              </imgshow>
            </el-form-item>
            </div>
            <div class="bot"> 
              <el-form-item v-if="record.iddbimage" label="受让人身份证(正反面) :">
                <imgshow> 
                  <img class="business-license" :src="this.mconfig.host+record.iddbimage" alt />
                </imgshow>
              </el-form-item>
            </div>
            <div class="bot"> 
              <el-form-item label="证明文件 :">
                <imgshow> <img class="business-license" :src="this.mconfig.host+record.transferProve" alt /></imgshow>
              </el-form-item>
            </div>
            <div class="bot"> 
              <el-form-item label="网上确认书 :">
                <imgshow> <img class="business-license" :src="this.mconfig.host+record.qrfile" alt /></imgshow>
              </el-form-item>
            </div>
            <div class="bot" v-if="record.otherfile.length > 0">
              <el-form-item label="其他附件 :">
                <imgshow v-for="item, index in record.otherfile" :key="index"> <img class="business-license" :src="mconfig.host+item" alt /></imgshow>
              </el-form-item>
            </div>
        </el-form>
    </div>
    <!-- 签字/章戳 -->
    <!-- <div class="signs">
      <div class="sign">
        <div>
          <span>转让人章戳(签字) :</span>
        </div>
        <div>
          <span>受让人章戳(签字) :</span>
        </div>
        <div>
          <span>代理机构章戳 :</span>
        </div>
      </div>
      <div class="agent">
        <p>代理人签字:</p>
      </div>
      <p class="careful">注：请 按 说 明 填 写</p>
    </div> -->
     <!-- v-if="showAll(append,append2)" -->
    <div class="additional" v-if="showAll()"  >
          <div class=" model-title">
              <h4> 转让/移转申请/注册商标申请书</h4>
              <p>（附页）</p>
          </div>
          <div v-if="showArr(append)">
            <h3>其他转让人：</h3>
            <proAppend class="" :callback="append"></proAppend>
          </div>
          <div v-if="showArr(append2)">
            <h3>其他受让人：</h3>
            <proAppend class="" :callback="append2"></proAppend>
          </div>
    </div>
</div>
</template>

<script>
import imgshow from "../common/imgshow"
import proAppend from "../common/proAppend"

export default {
    components:{imgshow,proAppend},
    name: "businessForm4",
    data() {
        return {
            right: "right",
            record: {
                transferProve:"",
                businessLicense:"",
                iddbimage:"",   //
                aassAddCn: "", //受让人地址(中文)
                aassAddEn: "", //受让人地址（英文）
                aassNameCn: "", //受让人名称(中文)
                aassNameEn: "", //受让人名称(英文)
                ageName: "", //代理机构名称
                agrImgAdd: "", //同意书
                appNum: "", //商标申请号/注册号
                branchNetworkId: "", //网点编号
                contacts: "", //联系人
                id: "", // 主键
                imgAdd: "", //身份证或者营业执照地址
                isComm: "", //是否共用商标（单选）
                phone: "", //电话
                postCode: "", //邮政编码
                postCodeCn: "", //邮政编码
                receAddCn: "", // 国内接收人地址
                receCn: "", //外国受让人的国内接收人
                subStatus: "", //状态 1保存 2选择通过 3选择未通过 4未审核
                proAppendJson: "", //共享人 json
                // tranAddCn: "", //转让人地址（中文）
                // tranAddEn: "", //转让人地址（英文）
                // tranNameCn: "", //转让人名称（中文）
                // tranNameEn: "", //转让人名称（英文）
                userId: "", //用户id
                busimg: "",
                idcardface: "",
                idcardimg: "",
                iDAddress:"",
            },
            append: [], // 共有人
            append2: [], // 共有人2
        };
    },
    methods: {
      showAll(){
        console.log("195行");
        var result = false
        if(this.append.length>0 && this.append2.length>0){
          
          // var result1 = showArr(_arr1)
          // var result2 = showArr(_arr2)
          // if(result1 && result2){
            result = true
          // }
        }
        //   alert("传入数组为空.")
        // }
        return result 
        
      },
      showArr(_arr){//该方法返回底部组件tit是否显示,接收一个数组参数，遍历其中对象
       
        var result = true


        if(_arr){
          _arr.forEach(item => {
              console.log(item);
              var len = 0
              var newArr = Object.keys(item);
              for (const key in newArr) {
                if(newArr[key] == ''){
                  len=len+1
                }
              }
              console.log(newArr.length,"length",len,"len");
              if(newArr.length = len){
                result = false
              }
          });
        }
        return result
      },
      
      //接口获取到数据
      interface(e) {
          this.$http
              .get("/trademark/proTTransfer/findByIdDetl", {
                  params: { id: e },
              })
              .then((res) => {
                  this.record = res.data.data.data
                  this.record.isComm = [this.record.isComm[0]];
                  this.record.otherfile = JSON.parse(this.record.otherfile);

                  this.append = res.data.data.append.filter(function(item){
                      return item.type==1
                  });
          //   console.log(res.data.data.append);
                  this.append2 = res.data.data.append2.filter(function(item){
                      return item.type==2
                  });
                  console.log(this.record);
                  // console.log(res.data.data.data.busimg.split(',')[0]);

                  this.record.busimg = res.data.data.data.busimg.split(',')[0];
                  this.record.idcardface = res.data.data.data.idcardface.split(',')[0];
                  // console.log(res, 9999);

              });
      },
    },
    mounted() {
        this.id = this.$route.query.id;
        this.interface(this.id);
    },

};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

.idcardimg{
  margin-left: 6px;
}
.additional h3{
  margin-left: 50px;
  padding: 10px 0;
  font-weight: 600;
}
.el-form.model-formmin {
    margin-left: 243px;
}
.rests {
    font-size: 16px;
    margin-top: 18px;
    margin-left: 13px;
    margin-bottom: 10px;
}
.total {
  margin-left: 160px;
}

.total h1 {
    padding: 30px 0;
    margin-left: 174px;
    font-weight: 500;
    font-size: 30px;
    /* margin-top: 30px; */
}

.total .sign {
    margin-top: 50px;
    text-align: center;
}

.total div {
  margin-bottom: 0;
}
.total .bot{
   margin-bottom:8px;
}
.head div .desClass {
    width: 200px;
}
.head h1{
  font-weight: 600;
  font-size: 25px;
}

.total .head .domestic {
    margin-bottom: 20px;
}

/* .total .head .choice span {

} */
/* 签字 */
.sign {
    display: flex;
    justify-content: center;
}

.sign div {
    width: 200px;
    margin: 15px;
}

/* 附加页 */
.model-title {

    font-size: 28px;
    color: #666;
    font-weight: 400;
    margin-bottom: 40px;
}

.model-title>h4 {
    font-size: 20px;
    font-weight: normal;
    /* line-height: 30px; */
    margin-left: 104px;
}

.model-title p {
    font-size: 16px;
    line-height: 30px;
    margin-left: 134px;
    margin-top: 15px;
}

ul,
li {
    padding: 0;
    margin: 0;
    list-style: none;
}

.additional {
  margin-top: 75px;
  margin-left: 153px;
  padding-bottom: 100px;
}

.additional h4 {
    font-weight: 600;
}

/* .additional .other {
  margin-top: 40px;
} */
.additional .other .main {
    text-align: center;
    margin-top: 20px;
}

.additional ul {
    margin-top: 25px;
    margin-left: 241px;
}

.additional ul li {
    margin: 10px 0;
}

.additional ul li span {
    display: inline-block;
    width: 106px;
    text-align: right;
    color: #000;
}

.additional ul li p {
    display: inline-block;
    margin-left: 300px;
    color: #ccc;
    margin-top: -8px;
}

.otherBox {
    margin-left: 10px;
    text-align: left !important;
}

.el-form {
    margin-left: 174px;
}

.business-license {
  margin: 5px;
}


.identity-card {
  width: 350px;
  display: inline-block;
  margin: 5px;
}


</style>
